<template>
  <div id="my_map">
    <div ref="map"></div>
  </div>
</template>

<script>
export default {
  props: {
    data: Array | Object
  },
  data() {
    return {};
  },
  created() {
    this.$watch('data', function (newValue, oldValue) {
      this.draw();
    });
  },
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      let that = this;
      let my_chart = that.$echarts.init(that.$refs.map);
      let option = {
        backgroundColor: '#FFFFFF',
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            if (params.value) {
              return params.name + ':' + params.value + '%';
            } else {
              return params.name + ':' + 0;
            }
          }
        },
        visualMap: {
          x: 'left',
          y: 'center',
          min: 0,
          max: 100,
          text: ['高', '低'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#ffefce', '#fd7f2c']
          }
        },

        //配置属性
        series: [
          {
            name: '数据',
            type: 'map',
            mapType: 'china',
            roam: false, //鼠标缩放
            label: {
              normal: {
                show: true //省份名称
              },
              emphasis: {
                show: false
              }
            },
            data: that.data //数据
          }
        ]
      };
      my_chart.setOption(option);
      let resizeFn = function () {
        my_chart.resize();
      };
      window.addEventListener('resize', resizeFn);
      this.$once('hook:beforeDestroy', () => {
        my_chart.dispose();
        my_chart = null;
        window.removeEventListener('resize', resizeFn);
      });
    }
  }
};
</script>
<style lang="less" scoped>
#my_map {
  > div {
    width: 100%;
    height: 100%;
  }
}
</style>